<template>
<div>
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="dtp" >
        <img class="dtp0" :src="list1.app_list_pic_url">
        <div class="dtp1">{{list1.name}}</div>
        <div class="dtp2">{{list1.simple_desc}}</div>
        <div class="bussiness" v-for="item1 in list2" :key="item1.id">
             <div class="bussiness1"><img class="xtp" :src="item1.list_pic_url"></div>
             <div>{{item1.name}}</div>
             <div class="bussiness2">￥{{item1.retail_price}}</div>
        </div>
    </div>
</div>

</template>

<script>
import {detailaction} from '@/api/home/business/business1/index'
export default {
    data(){
        return{
            list1:[]
        }

    },
    methods: {
    onClickLeft() {
      this.$router.go(-1)
      },
    },
    async created(){
        var result = await detailaction({
            id:this.$route.params.ids
        })
        this.list1 = result.data;
      this.list2 = result.goodsList
        console.log(result);
    }

}
</script>

<style>
.dtp img{
    width: 100%;
    height: 144px;
}
.dtp{
    position: relative;
    width: 100%;
    height: 2400px;
    background-color:#F4F4F4;
}
.dtp1{
    position: absolute;
    top: 50px;
    left: 130px;
    color: white;
    font-size: 20px;
    font-weight: 900;
}
.dtp2{
    width: 100%;
    height: 100px;
    font-size: 18px;
    color: grey;
    background-color: white;
}
.bussiness{
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    width: 180px;
    height:210px;
    background-color: white;
}
.bussiness1 img{
    width: 170px;
    height: 170px;
}
.bussiness2{
    color: #B4282D;
}
</style>